<template>
    <div v-cloak>
        <!-- 返回上一页 -->
        <div class="fanhui">
            <van-nav-bar :title="store.state.xiangqingdata.title" left-text="" left-arrow @click-left="onClickLeft" />
        </div>

        <!-- 顶部轮播图 -->
        <div>


            <van-swipe :autoplay="2000" lazy-render>
                <van-swipe-item v-for="item, i in data.datas?.duoDuanDetailImages" :key="i">
                    <img class="headerimgs" :src="item.url" />
                </van-swipe-item>
            </van-swipe>
        </div>
    </div>
    <div class="chentent">
        <div>
            <div>
                <span>￥</span> <span>{{ store.state.xiangqingdata.price }}</span>
            </div>
            <div>
                剩余数量100+
            </div>
        </div>
        <div>
            <div @click="isshowPopup">
                <span v-for="item in  data.datas?.vipSerForm?.nameList" :key="item">
                    {{ item }}
                </span>
            </div>
            <van-popup v-model:show="isshow" closeable position="bottom" :style="{ height: '60%' }">
                <div class="miaoshu">
                    <div v-for="item, i in  data.datas?.vipSerForm?.detailList" :key="i">
                        {{ item.text }}
                    </div>
                </div>

            </van-popup>

        </div>
        <div>
            {{ store.state.xiangqingdata.title }}
        </div>
        <div>
            {{ store.state.xiangqingdata.secondTitle }}
        </div>
        <div class="gongneng">
            <div v-for="item in  data.datas?.sellParameters" :key="item.id">
                <div>
                    <img :src="item.icon" alt="">
                </div>
                <div>
                    {{ item.subTitle }}
                </div>
                <div>
                    {{ item.title }}
                </div>
            </div>
        </div>
        <div  v-if=" data.datas?.baseAttributes.length> 0" class="selectcanshu" @click="toChushu">
            <div>
                查看参数
            </div>
            <div>
                <van-icon name="arrow" />
            </div>
        </div>

        <div class="tuijiansss">
            <div>
                推荐
            </div>
            <div>
                <div v-for="item, i in rdomlistDataAlls.datas" :key="item.id">
                    <div>
                        <div>
                            <img @click="seleteListData(item)" :src="item.url" alt="">
                        </div>
                        <div>{{ item.price }}
                        </div>
                        <div class="van-ellipsis">
                            {{ item.title }}
                        </div>
                    </div>

                </div>
            </div>
        </div>


        <van-popup v-model:show="show" closeable close-icon="close" position="bottom" :style="{ height: '80%' }">
            <div class="zhifuView">
                <div>确认订单</div>
                <div @click="showPopups">
                    <div>
                        <van-icon name="location-o" />
                    </div>
                    <div>
                        {{ useraddresss.data.name }},{{ useraddresss.data.tel }},
                        {{ useraddresss.data.address }}
                    </div>
                    <div>
                        <van-icon name="arrow" />
                    </div>

                </div>
                <div>
                    <div>
                        {{ store.state.xiangqingdata.price * nums }}

                    </div>
                    <div>
                        <van-stepper v-model="nums" />
                    </div>

                </div>

                <div>


                </div>
                <div @click="adduserOder">
                    立即支付
                </div>
                <div class="shoujitype">
                    <div v-for="item in data.datas?.attributes.configs" :key="item.id">
                        <div>
                            {{ item.name }}
                        </div>
                        <div>
                            <div v-for="items,is in item.values" :key="item.id"
                                :class="is == activenums ? 'active' : ''" @click="activenums=is">
                                {{ items.item }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </van-popup>
        <van-popup v-model:show="shows" closeable close-icon="close" position="bottom" :style="{ height: '80%' }">
            <div class="addressssss">


                <div v-for="item in useraddress.data" :key="item.id" @click="updateaddressid(item.id)">
                    <div>
                        <van-icon name="location-o" />
                    </div>
                    <div>
                        {{ item.name }},{{ item.tel }},
                        {{ item.address }}
                    </div>
                    <div>
                        <van-icon name="arrow" />
                    </div>

                </div>
            </div>
        </van-popup>
    </div>

    <!-- 业务层 -->
    <van-action-bar>
        <!-- <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" /> -->
        <van-action-bar-icon icon="cart-o" @click="toGouwuche" text="购物车" />
        <van-action-bar-icon icon="star" text="已收藏" @click="addshowcang(store.state.xiangqingdata.id)" :color="color1" />
        <van-action-bar-button type="warning" text="加入购物车" @click="addgouwuche(store.state.xiangqingdata.id)" />
        <van-action-bar-button type="danger" @click="showPopup" text="立即购买" />
    </van-action-bar>

    <!-- 底部商品介绍图 -->
    <div class="bomimgs">
        <div v-for="item, i in data.datas.duoDuanDescriptionImages" :key="i">
            <img :src="item.url" alt="">
        </div>
    </div>
    <div class="tianchong">

    </div>
    <van-back-top right="15vw" bottom="10vh" />
</template>

<script setup lang="ts">
import moment from 'moment'
import { reactive, ref } from 'vue'
import { useStore } from 'vuex';
import { addgouwuches, addShowCang, removeshoucang, adduserhistory, adduseroders, selectuseraddress, rdomlistDataAll } from '@/api/index'
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
let store = useStore()
const shows = ref(false);
const showPopups = () => {
    shows.value = true;
};
const show = ref(false);
const showPopup = () => {
    show.value = true;
};
//推荐数据
let rdomlistDataAlls = reactive({
    datas: [] as any
})
let activenums = ref(0)

//获取推荐数据
rdomlistDataAll(9).then((result) => {
    rdomlistDataAlls.datas = result.data.data

}).catch((err) => {
    console.log(err);
});
let router = useRouter()
//返回上一次页面
const onClickLeft = () => history.back();
let data = reactive({
    datas: {} as any
})

let toChushu = () => {
    router.push({
        path: '/canshu'
    })
}

const isshow = ref(false);
const isshowPopup = () => {
    isshow.value = true;
};
data.datas = JSON.parse(store.state.xiangqingdata.resultData)
console.log(data.datas);


//添加历史记录
adduserhistory(store.state.userData[0].id, store.state.xiangqingdata.id).then((result) => {

}).catch((err) => {
});
//用户默认地址
let useraddress = reactive({
    data: [] as any
})
let addressid: any = ref(0)
let useraddresss = reactive({
    data: {} as any
})

let seleteListData = (id: Number) => {
    router.push({
        path: `/xiangqing?id=${id}`
    })
    store.commit('updataxiangqingdata', id)
}
//查看用户地址
selectuseraddress(store.state.userData[0].id).then((result: any) => {

    useraddress.data = result.data.data
    addressid.value = result.data.data[0].id
    useraddress.data.forEach((iten: any) => {
        if (iten.id == addressid.value) {
            useraddresss.data = iten

        }
    })

}).catch((err: any) => {
    console.log(err);
});

let updateaddressid = (id: Number) => {
    addressid.value = id
    shows.value = false
    useraddress.data.forEach((iten: any) => {
        if (iten.id == addressid.value) {
            useraddresss.data = iten

        }
    })
}


//收藏颜色ff5000
// 当前未收藏
let color1 = ref('#cccccc')

const addshowcang = (shoppingid: Number) => {
    if (color1.value == '#cccccc') {
        color1.value = '#ff5000'
        addShowCang(shoppingid, store.state.userData[0].id).then((result) => {
            showToast('收藏成功')
        }).catch((err) => {
            color1.value = '#cccccc'
            showToast('收藏失败')
        });
    } else {
        color1.value = '#cccccc'
        removeshoucang(shoppingid, store.state.userData[0].id).then((result) => {
            showToast('已取消收藏')
        }).catch((err) => {
            color1.value = '#ff5000'
            showToast('删除失败，网络出现了状况')
        });
    }
}

//添加购物车
let addgouwuche = (id: Number) => {

    addgouwuches(id, store.state.userData[0].id).then((result: any) => {

        showToast(result.data.msg)
    }).catch((err: any) => {
        showToast('网络错误')
    });
}
const nums = ref(1);

//购买商品
let adduserOder = () => {

    let dates = moment().format('YYYY年MM月DD日 hh:mm:ss')
    let price: any = (store.state.xiangqingdata.price * nums.value).toFixed(0)
    let datssssss: any = new Date()
    let datastime: any = datssssss.getTime()
    adduseroders(store.state.userData[0].id, store.state.xiangqingdata.id, nums.value, price - 0, dates, addressid.value, datastime).then((result: any) => {
        showToast('购买成功')
        show.value = false
    }).catch((err: any) => {
        console.log(err);
    });
}

//前往购物车
let toGouwuche = () => {
    router.push({
        path: '/gouwuche'
    })
}
</script>

<style lang="less" >
.van-back-top{
    background-color: #f83d3d;
}
.tuijiansss {

    width: 345rem;
    margin: 0 auto;

    >div:nth-child(1) {
        font-size: 18rem;
        font-weight: 600;

    }

    >div:nth-child(2) {
        margin-top: 20rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        >div {
            margin-top: 5rem;
            width: 100rem !important; 
            height: 150rem;
            background-color: #f4fdfd;

            >div {
                img {
                    width: 100rem !important;
                }
                >div:nth-child(2) {
                    color: #f83d3d;
                    width: 80rem;
                    margin: 0 auto;
                }

                >div:nth-child(3) {
                    color: rgb(116, 111, 111);
                    width: 80rem;
                    margin: 0 auto;
                }

                border-radius: 5rem;

                
            }
        }

    }
}

.selectcanshu {
    width: 335rem;
    padding: 0rem 20rem;
    display: flex;
    justify-content: space-between;
    font-size: 18rem;
    border-top: 8rem solid #f3f3f3;
    border-bottom: 8rem solid #f3f3f3;
    height: 50rem;
    line-height: 50rem;
    font-weight: 800;
    margin-top: 15rem;
}

.gongneng {
    padding: 10rem 20rem;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    text-align: center;
    font-size: 12rem;
    border-top: 8rem solid #f3f3f3;


    >div {
        >div:nth-child(1) {
            img {
                width: 30rem;
                height: 30rem;
            }
        }
    }
}



.active {
    border: 1rem solid #a89d9d !important;
}

.shoujitype {
    width: 345rem;
    margin: 0 auto;

    >div {
        >div:nth-child(1) {
            font-size: 16rem;
            font-weight: 600;
            margin-top: 10rem;
        }

        >div:nth-child(2) {
            font-size: 16rem;
            display: flex;
            flex-wrap: wrap;

            >div {
                margin-top: 10rem;
                margin-right: 10rem;
                padding: 5rem 10rem;
                border-radius: 5rem;
                border: 1rem solid #f3f3f3;
            }
        }
    }
}

.miaoshu {
    width: 335rem;
    margin: 0 auto;
    padding-top: 40rem;
    font-size: 14rem;
    color: #d1cdcd;

    >div {
        margin-top: 10rem;
        line-height: 20rem;
    }
}

.chentent {
    text-align: left;

    >div:nth-child(1) {
        width: 325rem;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        margin-top: 20rem;
        padding-left: 25rem;

        span:nth-child(1) {
            font-size: 12rem;
            color: #f83d3d;
        }

        span:nth-child(2) {
            font-size: 18rem;
            color: #f83d3d;
        }
    }

    >div:nth-child(2) {
        width: 345rem;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        margin-top: 10rem;
        justify-content: space-between;
        align-items: center;
        padding: 10rem 0rem;
        border-bottom: 1px solid #f3f3f3;
        border-top: 1px solid #f3f3f3;

        div:nth-child(1) {
            display: flex;
            flex-wrap: wrap;

            span {
                display: block;
                margin-top: 3rem;
                padding-left: 5rem;
                padding-right: 5rem;
                height: 20rem;
                line-height: 20rem;
                font-size: 12rem;
               background-color: #f4fdfd;
                border: 1px solid #f4fdfd;
                margin-right: 5rem;
                border-radius: 4rem;
            }
        }

    }

    >div:nth-child(3) {

        width: 325rem;
        margin: 0 auto;
        font-weight: 600;
        font-size: 18rem;
        margin-top: 10rem;

    }

    >div:nth-child(4) {
        width: 325rem;
        margin: 0 auto;
        margin-top: 10rem;
        font-weight: 600;

    }




}

.headerimgs {
    width: 375rem;
    height: 300rem;
}

.bomimgs {
    margin-top: 15rem;

    div> {
        margin-top: -4rem;
    }

    img {
        width: 375rem;
    }
}

.tianchong {
    height: 50rem;
}

.addressssss {
    margin-top: 50rem;

    >div {
        margin-top: 15rem;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #eee8e8;
        border-top: 1px solid #eee8e8;
        padding-top: 10rem;
        padding-bottom: 10rem;

        >div {
            margin: 5rem;
            font-size: 14rem;
            font-weight: 600;

            i {
                font-size: 20rem;
            }
        }
    }

}

.zhifuView {
    width: 345rem;
    margin: 0 auto;

   
    >div:nth-child(1) {
        font-size: 18rem;
        font-weight: 600;
        width: 345rem;
        text-align: center !important;
        margin-top: 20rem;
        margin-bottom: 20rem;

    }

    >div:nth-child(2) {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #eee8e8;
        border-top: 1px solid #eee8e8;
        padding-top: 10rem;
        padding-bottom: 10rem;

        >div {
            margin: 5rem;
            font-size: 14rem;
            font-weight: 600;

            i {
                font-size: 20rem;
            }
        }
    }

    >div:nth-child(3) {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between; 
        margin-top: 20rem;
       

        >div:nth-child(1) {
            color: #f83d3d;
            font-size: 16rem;
        }
        
    }

    >div:nth-child(4) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-top: 15rem;
        padding-bottom: 20rem;
        margin-bottom: 20rem;
        >span {
            display: block;
            line-height: 20rem;
            border-radius: 8rem;
            padding: 0rem 5rem;
            color: #cfc9c9;



        }
    }

    // >div:nth-child(5) {
    //     width: 345rem;
    //     position: fixed;
    //     bottom: 0;
    //     text-align: center;
    //     height: 50rem;
    //     background-color: #f83d3d;
    //     border-radius: 25rem;
    //     color: #ffffff;
    //     font-size: 18rem;
    //     line-height: 50rem;
    //     font-weight: 700;
    // }

}

.fanhui {
    .van-nav-bar .van-icon {
        color: #333333;
    }

    .van-nav-bar__text {
        color: #333333;
    }
}
</style>